import React from 'react';
import { SearchBar, Button,Tools, Avatar, Modal, Icon, Picker,ActionSheet,InputItem,Toast} from 'weaver-mobile';
import {inject, observer} from 'mobx-react';
import { Route, withRouter, Switch, Redirect } from 'react-router-dom';
const alert = Modal.alert;
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let wrapProps;
if (isIPhone) {
  wrapProps = {
    onTouchStart: e => e.preventDefault(),
  };
}
const getLabel = Tools.getLabel;
const seasons = [
  [
    {
      label: getLabel('154',"一般"),
      value: '1',
    },
    {
      label: getLabel('25436',"关注"),
      value: '2',
    },
    {
      label: getLabel('25397',"重要"),
      value: '3',
    }
  ]
];
@inject('CollectionListStore')
@withRouter
@observer
export default class DetailPage extends React.Component {
    state = {
        value: '重要',
        sValue:0,
        Levelvisible:false,
        selected:'',
        clicked:'none', 
        levelStyle:['importantLevel2','importantLevel1','importantLevel0']
      };
  componentWillMount(){
    const { CollectionListStore ,location} = this.props;
    const { listAd,moveId,setState } = CollectionListStore;
    if(moveId==''){
      setState({moveId:location.state.favid})
    }

  }  
  componentDidMount(){
    const { CollectionListStore } = this.props;
    const { listAd,moveId,setState } = CollectionListStore;
    const {listViewStore} = listAd  
    const options = {
      url: '/api/favourite/mobile/getFavouriteList',
      method: 'POST',
      params: {favid: moveId },
      type: 'json',
    };
    Tools.callApi(options).then((src) => {
      this.props.CollectionListStore.detailData = src
      // console.log(src.adddate.join(''))
     // console.log(listViewStore.getData({ dataKey: src.datas }));
    });
  }
  toHistory = (val) => {
    val ? this.props.history.push(val) : this.props.history.go(-1);
  }

  handleClick=()=>{
    const { CollectionListStore } = this.props;
    const { listAd,moveId } = CollectionListStore;
    const {listViewStore,leftTreeStore} = listAd;
    alert('', getLabel('388215','删除后不可恢复，您确认删除该条记录吗？'), [
      { text: getLabel('31129',"取消"), onPress: () => {console.log(leftTreeStore)}, style: 'default' },
      { text: getLabel('826',"确定"), onPress: () => {
        const options = {
        url: '/api/sysfavourite/delete',
        method: 'POST',
        params: {favid: moveId },
        type: 'json',
      };
      Tools.callApi(options).then((src) => {
        this.toHistory('/favouriteList')
        listViewStore.clearData();
        leftTreeStore.selectedKeys = '';
        leftTreeStore.valueArray = [];
        leftTreeStore.valueArrayCache=[];
        listAd.getData({ url: '/api/favourite/mobile/getFavouriteList', method: 'post',params:{dirid: ''}});
      });} },
    ])
    


  }
  move=()=>{
    const { CollectionListStore } = this.props;
    const { listAd,moveId } = CollectionListStore;
    const { listViewStore } = listAd
    if (moveId != undefined) {
      this.toHistory('/favouriteList/test/tree')
      this.props.CollectionListStore.moveSignal = true
      this.props.CollectionListStore.mode = 'detail'
    } else {
      Modal.alert(getLabel('127353',"错误"))
    }
  }
  saveEdit=()=>{
    const { CollectionListStore } = this.props;
    const { listAd,moveId ,detailData} = CollectionListStore;
    let editArea = this.refs.editArea.innerText
    const options = {
      url: '/api/sysfavourite/edit',
      method: 'POST',
      params: {pagename: editArea ,
        favouritetype: detailData.favouritetype,
        favid: detailData.id,
        favtypename: '',
        dirid: detailData.favouriteid,
        favouriteObjid: 0},
      type: 'json',
    };
    
    Tools.callApi(options).then((src) => {
      if(src.success==1){
        Toast.info("保存成功", 1)
        this.props.CollectionListStore.needRefresh = 1
      }
    });
  }
  showActionSheet = () => {
    const { CollectionListStore } = this.props;
    const {detailData} = CollectionListStore
    const {repeatIconTitle,moveIconTitle,deleteIconTitle,cancelBtnName} = CollectionListStore.detailData.allbutton
    const BUTTONS = [
      // {
      //   content: repeatIconTitle,
      //   onClick: () => {this.toHistory('/forward')},
      // },
      {
        content: moveIconTitle,
        onClick: () => this.move(),
      },
      {
        content: deleteIconTitle,
        onClick: () => this.handleClick(),
      },
      {
        content: cancelBtnName,
        onClick: () => console.log('Cancel'),
      }
    ];
    ActionSheet.showActionSheetWithOptions({
      options: BUTTONS,
      cancelButtonIndex: BUTTONS.length - 1,
      // destructiveButtonIndex: BUTTONS.length - 2,
      // title: 'title',
      // message: 'I am description, description, description',
      maskClosable: true,
      'data-seed': 'logId',
      wrapProps,
    },
    (buttonIndex) => {
      this.setState({ clicked: BUTTONS[buttonIndex] });
    });
  }

  render() {
    const { CollectionListStore } = this.props;
    const {detailData,moveId} = CollectionListStore

    return (
        <div>
            <div className='detailpageHead'>
               <Avatar className='portrait' name={detailData.username||'杨文远'}  url={detailData.headportrait||''}  />
               <div className='collectionMsg'>
                   <span>{detailData.username}</span><div className={this.state.levelStyle[detailData.importlevel-1]}  onClick={()=>{this.setState({Levelvisible:true})}}>{detailData.importlevelspan}</div>
                   <div className='createTime'>{getLabel('390914',"收藏于")+detailData.adddate}</div>
               </div>
            </div>

            
          <div className='detailpageContent' contentEditable={detailData.favouritetype=='6'?"false":"true"} onBlur={()=>{this.saveEdit()}} ref="editArea">{detailData.favnamespan==""?detailData.favname:detailData.favnamespan}</div>
          <div className='detailpageFooter'>
              <Icon type="annex-big" size='small' />
              <span className='mycollection'>{detailData.favouritetitle}</span>
              <span className='collectionmore' onClick={()=>{this.showActionSheet()}} ><Icon type="ellipsis" size='small' /></span>
          </div>
          <Picker
          visible={this.state.Levelvisible}
          data={seasons}
          cascade={false}
          extra=""
          value={this.state.sValue}
          onOk={v =>{
            const options = {
              url: '/api/sysfavourite/editLevel',
              method: 'POST',
              params: {favid: moveId,importlevel:v },
              type: 'json',
            };
            Tools.callApi(options).then((src) => {
              const options = {
                url: '/api/favourite/mobile/getFavouriteList',
                method: 'POST',
                params: {favid: moveId },
                type: 'json',
              };
              Tools.callApi(options).then((src) => {
                this.props.CollectionListStore.detailData = src
                console.log(src)
               // console.log(listViewStore.getData({ dataKey: src.datas }));
              });
            });
            this.setState({Levelvisible: false})
          }}
          onDismiss={() => this.setState({ Levelvisible: false })}
        />
    
        </div>

    )  
  }
}